*{
    margin: 0;
    padding: 0;
}

html, body{
    height: 100%;
    width: 100%;
}

.music-btn{
    position: fixed;
    width: 40px;
    height: 40px;
    top: 25px;
    left: 25px;
    background: url('./assets/close.png');
    background-size: cover;
    z-index: 99;
}
/* 不打空格则表示 打空格 */
/* 多个类名添加的css权重更高 */
.music-btn.off{
    background-image: url('./assets/music.png');
}

.view{
    width: 100%;
    height: 100%;
    overflow: hidden;
    /* 为其子元素做准备 */
    position: relative;
    /* 线性渐变, 从60度开始(顺时针,从Y轴开始),73%表示在整个渐变过程中，“#faece5” 这个颜色在 73% 的位置出现*/
    background-image: linear-gradient(60deg, #f8ddd1, #faece5 73%, #fad2c0);
    /* 其sun的位置也可以用弹性布局,对sun的父容器进行display:flex */
    /* display: flex;
    align-items: center;
    justify-content: center; */
}

.sun{
    width: 283px;
    height: 283px;
    background-image: url(https://s5.music.126.net/static_public/5c21db8d4684556c72180904/sun.a3f575ae2fef2cfdae15011e6081a094.png);;
    background-size: cover;
    position: absolute;
    left: 50%;
    top: 45%;
    /* 平移是以自身宽度平移 */
    transform: translate(-50%,-50%);
}
.art{
    position: absolute;
    width: 750px;
    height: 1334px;
    transform: scale(0.5);
    right: 0;
    top: -140px;
    /* 设置旋转基点为 左上角 */
    transform-origin: top right;
}
.swing{
    position: absolute;
    left: 226px;
    top: -180px;
    width: 478px;
    height: 1038px;
    background-image: url('https://s5.music.126.net/static_public/5c21db8d4684556c72180904/swing.88545d6c8e1ac798465e367f8e5357ab.png');
    transform-origin: -16% -30%;
    /* 设置贝塞尔曲线 infinite无线 */
    animation: qiuqian 6s cubic-bezier(0.45, 0.03, 0.515, 0.955) infinite;
}
@keyframes qiuqian{
    0%{
        transform: rotate(0deg);
    }
    50%{
        transform: rotate(32deg);
    }
    100%{
        transform: rotate(0deg);
    }
}

.leg1{
    position: absolute;
    width: 63px;
    height: 130px;
    left: 290.375px;
    top: 955.25px;
    background: url('https://s5.music.126.net/static_public/5c21db8d4684556c72180904/leg1.b1df6a7d1a794d36fbd0e1277733e1cf.png');
    transform-origin: 17.857% 13.365%;
    animation: ani_leg1 8s ease infinite;
}

@keyframes ani_leg1{
    0%{
        transform: rotate(0deg);
    }
    25%{
        transform: rotate(109deg);
    }
    50%{
        transform: rotate(0deg);
    }
    75%{
        transform: rotate(109deg);
    }
    100%{
        transform: rotate(0deg);
    }
}

.leg1 .jiaojiao{
    width: 39px;
    height: 62px;
    position: absolute;
    background: url('https://s5.music.126.net/static_public/5c21db8d4684556c72180904/leg1-part.f2f17703a6af8fd2af5e0f5a9f320623.png');
    left: 26.25px;
    top: 102.5px;
}
.leg2{
    position: absolute;
    left: 185.375px;
    top: 958px;
    width: 130px;
    height: 32px;
    background: url('https://s5.music.126.net/static_public/5c21db8d4684556c72180904/leg2.d7bc44a91b6974450f2ccc430846c63d.png');
    transform-origin: 91.15% 33.59%;
    animation: ani_leg2 8s ease infinite;
}
@keyframes ani_leg2{
    0%{
        transform: rotate(0deg);
    }
    25%{
        transform: rotate(-87deg);
    }
    50%{
        transform: rotate(0deg);
    }
    75%{
        transform: rotate(-87deg);
    }
    100%{
        transform: rotate(0deg);
    }
}
.leg2 .jiaojiao{
    width: 57px;
    height: 44px;
    background: url('https://s5.music.126.net/static_public/5c21db8d4684556c72180904/leg2-part.8f70bb7fc789a70bc78c48aa7718a765.png');
    left: -27.75px;
    top: -10.5px;
    position: absolute;
}
.neck{
    width: 51px;
    height: 42px;
    background-image: url('https://s5.music.126.net/static_public/5c21db8d4684556c72180904/neck.07a0013beff9796ed79c2cea542e5af2.png');
    position: absolute;
    top: 855.5px;
    left: 451.125px;
}
.head{
    width: 51px;
    height: 42px;
    background: url('https://s5.music.126.net/static_public/5c21db8d4684556c72180904/head.90bf892023d7df0522a4b53fc07e38df.png');
    position: absolute;
    left: 451.125px;
    top: 855.5px;
    animation: ani_head 8s ease 1, ani_head_flow 0s 8s ease forwards;
    /* animation: ani_head 8s ease infinite; */
}
@keyframes ani_head{
    0%{
        transform: rotate(0deg);
    }
    25%{
        transform: rotate(-55deg);
    }
    62.5%{
        transform: rotate(-55deg);
    }
    87.92%{
        transform: rotate(0deg);
    }
    100%{
        transform: rotate(0deg);
    }
}
@keyframes ani_head_flow{
    0%{
        transform: translate(-40px);
    }
    100%{
        transform: translateY(450px);
    }
}
.part{
    width: 40px;
    height: 47px;
    background: url('https://s5.music.126.net/static_public/5c21db8d4684556c72180904/head-part.22d4381c4bd6cb1c3afd2b1bfcfe22f1.png');
    position: absolute;
    left: 20px;
    top: 2px;
}
.texts{
    bottom: 110px;
    left: 10.67%;
    position: absolute;
    line-height: 1.6667;
    letter-spacing: 1px;
}
.z-enter .textAni{
    opacity: 1;
    transform: translateY(0);
    transition: opacity 1.2s, transform 1s;
}
.textAni{
    opacity: 0;
    transform: translateY(6px);
}


.texts p:nth-child(1){
    animation-delay: 0.2s;
}
.texts p:nth-child(2){
    animation-delay: 0.3s;
}
.texts p:nth-child(3){
    animation-delay: 0.4s;
}
.texts p:nth-child(4){
    animation-delay: 0.5s;
}
.texts p:nth-child(5){
    animation-delay: 0.6s;
}

.swiper-slide{
    width: 100%;
    height: 667px;
}

.view-cat{
    width: 100%;
    height: 100%;
    background: url('https://s5.music.126.net/static_public/5c21db8d4684556c72180904/head-part.22d4381c4bd6cb1c3afd2b1bfcfe22f1.png');
    overflow: hidden;
}